<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
    <meta name="format-detection" content="telephone=yes">
    <meta name="apple-touch-fullscreen" content="yes"/>
    <meta name="description" content="Official Website of HybridOS">
    <meta name="author" content="Vincent Wei">

    <title>HybridOS</title>

    <!-- Bootstrap Core CSS -->
    <link rel="stylesheet" type="text/css" href="assets/css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" href="assets/css/freelancer.css">

    <!-- Main CSS -->
    <link rel="stylesheet" type="text/css" href="assets/css/main.css" />

    <!-- Syntax Highlight -->
    <link rel="stylesheet" href="assets/css/markdown-highligth.css">

    <!-- Fonts -->
    <link href="assets/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link href='//fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>

    <!-- AniJS -->
    <link href="assets/css/anicollection.css" rel="stylesheet" type="text/css">

</head>

<body id="page-top" class="index">

<!-- Navigation -->
<nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header page-scroll">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#page-top">HybridOS</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav navbar-right">
                <li class="hidden">
                    <a href="#page-top"></a>
                </li>
                <li class="page-scroll">
                    <a href="#highlights">Highlights</a>
                </li>
                <li class="page-scroll">
                    <a href="#current-status">Current Status</a>
                </li>
                <li class="page-scroll">
                    <a href="#sponsors">Sponsors</a>
                </li>
                <!--li class="page-scroll">
                    <a href="#livedemo">Live Demo</a>
                </li>
                <li class="page-scroll">
                    <a href="#quickstart">Quick Start</a>
                </li -->
                <li class="page-scroll">
                    <a href="#licensing">Licensing</a>
                </li>
                <li class="page-scroll">
                    <a href="#resource">Resource</a>
                </li>
            </ul>
        </div>
        <!-- /.navbar-collapse -->
    </div>
    <!-- /.container-fluid -->
</nav>

<header>
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <div class="intro-text">
                    <span class="name">HybridOS<sup>&reg;</sup></span>
                    <span class="skills">A totally new open source operating system designed for smart IoT devices and cloud computing environment.</span>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-8 col-lg-offset-2 text-center" data-anijs="if: scroll, on: window, do: rubberBand animated, before: scrollReveal">
                <a href="https://store.fmsoft.cn/campaign/denoteoss-lt" class="btn btn-lg btn-outline">Donate HybridOS <i class="fa fa-money"></i></a>
            </div>
        </div>
    </div>
</header>

<section id="highlights">
    <div class="container" >
        <div class="row">
            <div class="col-lg-12 text-center">
                <h2>Highlights</h2>
                <hr>
            </div>
        </div>
    </div>

    <div class="container container-gray">
	    <div class="row">
		    <div class="col-xs-12 col-sm-6" data-anijs="if: scroll, on: window, do: bounceInLeft animated, before: scrollReveal">
			    <div class="desc-block-wrapper">
                    <div class="desc-block-middle text-center">
                        <h3>A specialized software stack</h3>
                        <p class="list-group-item-text">HybridOS not only runs on smart IoT devices to support application development on devices, but also provides programming interfaces for the cloud and the clients. It tries to give the developers a new complete software stack and protocol stack from devices to the cloud and the clients.</p>
                        <p><a class="btn btn-default btn-lg"
                            href="https://github.com/FMSoftCN/hybridos/blob/master/docs/specs/HybridOS-Architecture.md" role="button">Learn more</a></p>
                    </div>
			    </div>
		    </div>

            <!-- div class="col-xs-6 col-sm-3 first-image" data-anijs="if: scroll, on: window, do: fadeInRight animated, before: scrollReveal">
                <img src="assets/images/hybridos-1.png" class="img-responsive center-block">
            </div>

            <div class="col-xs-6 col-sm-3 second-image" data-anijs="if: scroll, on: window, do: fadeInRight animated, before: scrollReveal">
                <img src="assets/images/hybridos-2.png" class="img-responsive center-block">
            </div -->
        </div>
    </div>

    <div class="container container-light">
        <div class="row">
            <!-- div class="col-xs-6 col-sm-3 third-image" data-anijs="if: scroll, on: window, do: fadeInLeft animated, before: scrollReveal">
                <img src="assets/images/hybridos-3.png" class="img-responsive center-block">
            </div>

            <div class="col-xs-6 col-sm-3" data-anijs="if: scroll, on: window, do: fadeInLeft animated, before: scrollReveal">
                <img src="assets/images/hybridos-4.png" class="img-responsive center-block">
            </div -->

		    <div class="col-xs-12 col-sm-6 col-sm-offset-6" data-anijs="if: scroll, on: window, do: bounceInRight animated, before: scrollReveal">
                <div class="desc-block-wrapper">
                    <div class="desc-block-middle text-center">
                        <h3>A new and universal app framework for IoT devices and client apps</h3>
                        <p class="list-group-item-text">The developers can always write device app and client apps for any operating system, such as Linux, Windows, macOS, Android, iOS, or RTOS like ThreadX, by using a set of extended HTML5 tags and JavaScript/CSS.
                        <p><a class="btn btn-default btn-lg"
                                href="https://github.com/FMSoftCN/hybridos/blob/master/docs/specs/HybridOS-App-Framework.md" role="button">Learn more</a></p>
                    </div>
                </div>
            </div>

        </div>
    </div>

    <div class="container container-gray">
        <div class="row">
		    <div class="col-xs-12 col-sm-6" data-anijs="if: scroll, on: window, do: bounceInUp animated, before: scrollReveal">
                <div class="desc-block-wrapper">
                    <div class="desc-block-middle text-center">
                        <h3>IoT-dedicated cloud computing services and security implementation</h3>
                        <p class="list-group-item-text">HybridOS integrates some cloud computing services which are dedicated to IoT, such as distributed MQTT servers, identity authentication mechanism, and some basic services, such as firmware upgrade. HybridOS will provide a new security service for identity authentication mechanism based on blockchain technology.</p>
                        <p><a class="link-not-ready btn btn-default btn-lg" role="button"
                                href="#" role="button">Learn more</a></p>
                    </div>
                </div>
            </div>

            <!-- div class="col-xs-12 col-sm-6" data-anijs="if: scroll, on: window, do: bounceInDown animated, before: scrollReveal">
                <img src="assets/images/minigui-arch.png" class="img-responsive center-block">
            </div -->
        </div>
    </div>

</section>

<section id="current-status" class="container-light">
    <div class="container">
        <div class="row">
            <div class="col-lg-12 text-center">
                <h2>Current Status</h2>
                <hr/>
            </div>
        </div>

        <div class="row">
            <div class="col-lg-9 col-lg-offset-1">
                <ul>
                    <li>Nov. 2019:<br/>Initial release of <a href="https://github.com/FMSoftCN/hicairo">hiCairo</a>.</li>
                    <li>Nov. 2018:<br/>Initiate this project and organize specifications and design documents.</li>
                </ul>
            </div>
        </div>
    </div>
</section>

<section id="sponsors" class="container-dark">
    <div class="container" >
        <div class="row">
            <div class="col-lg-12 text-center">
                <h2>Sponsors</h2>
                <hr/>
            </div>
        </div>

        <div class="row">
            <div class="col-lg-9 col-lg-offset-1">
                <p>The development of HybridOS needs your support!</p>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-8 col-lg-offset-2 text-center" data-anijs="if: scroll, on: window, do: rubberBand animated, before: scrollReveal">
                <a href="/en/sponsor" class="link-not-ready btn btn-lg btn-outline href-lang-prefix" data-target="sponsor">Become a Sponsor!</i></a>
            </div>
        </div>
    </div>
</section>

<!-- section id="livedemo" class="container-dark">
    <div class="container">
        <div class="row">
            <div class="col-lg-12 text-center">
                <h2>Live Demo</h2>
                <p>Run HybridOS demos in place</p>
                <p class="small">(Comming soon, stay tuned!)</p>
            </div>
        </div>

        <div class="row">
		    <div class="col-sm-12" data-anijs="if: scroll, on: window, do: fadeInLeft animated, before: scrollReveal">
                <div class="text-center">
                    <div class="live-demo center-block">
                        <img class="demo-shell" usemap="#keysMGUXDEMO" src="assets/images/live-demo-mguxdemo.png">
                        <map name="keysMGUXDEMO" id="keysMGUXDEMO">
                             <area id="playMGUXDEMO" shape="rect" coords="160,320,270,420"/>
                             <area id="mguxdemoHomeKey" shape="rect" coords="100,660,180,680"/>
                             <area id="mguxdemoBackKey" shape="rect" coords="260,660,340,680"/>
                        </map>
                        <canvas width="360" height="480" id="canvasMGUXDEMO"></canvas>
                    </div>
                    <h3>mGUXDemo</h3>
                    <p class="list-group-item-text">A large screen with touch panel</p>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-sm-12" data-anijs="if: scroll, on: window, do: fadeInRight animated, before: scrollReveal">
                <div class="text-center">
                    <div class="live-demo center-block">
                        <img class="demo-shell" usemap="#keysCBPLUS" src="assets/images/live-demo-cbplus.png">
                        <map name="keysCBPLUS" id="keysCBPLUS">
                             <area id="playCBPLUS" shape="rect" coords="250,100,350,200"/>
                             <area id="cbplusBackKey" shape="rect" coords="500,150,540,220"/>
                        </map>
                        <canvas width="240" height="240" id="canvasCBPLUS"></canvas>
                    </div>
                    <h3>Joopic CBPlus (Comming soon)</h3>
                    <p class="list-group-item-text">A small screen with touch panel</p>
                </div>
            </div>
        </div>

    </div>

</section -->

<!-- section id="quickstart" class="container-light">
    <div class="container" >
        <div class="row">
            <div class="col-lg-12 text-center">
                <h2>Quick Start</h2>
                <hr/>
            </div>
        </div>

        <div class="row">
            <div class="col-lg-9 col-lg-offset-1">
                <p>(Comming soon, stay tuned!)</p>
            </div>
        </div>
    </div>
</section -->

<section id="licensing" class="container-gray" data-anijs="if: scroll, on:window, do: bounceInRight animated, before: scrollReveal, after: removeAnim">
    <div class="container" >
        <div class="row">
            <div class="col-lg-12 text-center">
                <h2>Licensing</h2>
                <hr/>
            </div>
        </div>
    </div>

    <div class="container">
        <div class="row">
            <div class="col-xs-12">
                <div>
                    <h4>It's free software!</h4>
                    <p>Copyright &copy; 2018 ~ 2019 <a href="https://www.fmsoft.cn">Beijing FMSoft Technologies Co., Ltd.</a></p>
                    <ul>
                        <li>For device side and client side, all new components use LGPLv3.</li>
                        <li>For server side, all new components use AGPLv3.</li>
                        <li>If a component of HybridOS is a derivative of an existing open source software, we generally inherit the original license.</li>
                    </ul>
                    <p>Also note that HybridOS integrates many mature open source software, such as SQLite, FreeType, V8 JavaScript engine, and so on. For the copyright owners and licenses for these software, please refer to the README or LICENSE files contained in the source tarballs.</p>
                </div>
            </div>
        </div>
    </div>

</section>

<footer id="resource" class="text-center" data-anijs="if: scroll, on:window, do: flipInY animated, before: scrollReveal, after: removeAnim">
    <div class="footer-above">
        <div class="container" >
            <div class="row">
                <div class="col-lg-12 text-center">
                    <h2>Resource</h2>
                    <hr/>
                </div>
            </div>
        </div>

        <div class="container text-center">
            <div class="row">
                <div class="footer-col col-sm-12">
                    <a target="_blank" class="btn btn-md btn-outline"
                            href="https://github.com/FMSoftCN/hybridos">Repo on GitHub <i class="fa fa-github"></i>
                    </a>
                    <a target="_blank" class="link-not-ready btn btn-md btn-outline href-lang-prefix"
                            href="#" data-target="download">Download Tarballs <i class="fa fa-floppy-o"></i></a>
                    <a target="_blank" class="btn btn-md btn-outline"
                            href="https://github.com/FMSoftCN/hybridos/blob/master/docs/README.md"
                            data-target="#">Documentation <i class="fa fa-book"></i>
                    </a>
                </div>
            </div>
        </div>
    </div>

    <div class="footer-below" data-anijs="if: scroll, on: window, do: fadeInUp animated, before: scrollReveal">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <p>Copyright &copy; 2019 <a style="color:#CCB2A3;" href="https://www.fmsoft.cn">FMSoft</a>. </p>
                </div>
            </div>
        </div>
    </div>
</footer>

<div class="scroll-top page-scroll visible-xs visble-sm">
    <a class="btn btn-primary" href="#page-top">
        <i class="fa fa-chevron-up"></i>
    </a>
</div>

<!-- script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script -->
<!-- script src="//cdn.bootcss.com/jquery-easing/1.4.1/jquery.easing.min.js"></script -->
<!-- script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script -->
<script src="assets/js/jquery.min.js"></script -->
<script src="assets/js/jquery.easing.min.js"></script -->
<script src="assets/js/bootstrap.min.js"></script -->
<script src="assets/js/classie.js"></script>
<script src="assets/js/cbpAnimatedHeader.js"></script>
<script src="assets/js/anijs/anijs.js"></script>
<script src="assets/js/anijs/anijs-helper-scrollreveal.js"></script>
<script src="assets/js/freelancer.js"></script>
<script src="assets/js/webdisplay.js"></script>

<script type="text/javascript">
var currentLang = navigator.language;
if (!currentLang) {
    currentLang = navigator.browserLanguage;
}

var prefix = '/en/';

var idx = currentLang.indexOf ("zh");
if (idx == 0) {
    prefix = '/zh/';
}

$('.href-lang-prefix').each (function () {
    var target = $(this).attr ('data-target');
    target = prefix + target;
    $(this).attr ('href', target);
});

var wdmguxdemo = null;
$('#playMGUXDEMO').click (function () {
    wdmguxdemo = new WebDisplay ('dev.fmsoft.cn', 7788, 'mguxdemo', 'canvasMGUXDEMO', function () {
        $('#canvasMGUXDEMO').show ();

        $('#mguxdemoHomeKey').click (function () {
            if (wdmguxdemo != null) {
                wdmguxdemo.sendkeyevent ('escape');
            }
        });

        $('#mguxdemoBackKey').click (function () {
            if (wdmguxdemo != null) {
                wdmguxdemo.sendkeyevent ('backspace');
            }
        });

    },
    function (evt) {
        $('#canvasMGUXDEMO').hide ();
    },
    function (evt) {
        console.log (evt);
        alert ('Failed to connect Web Display Server; Too busy, please try later.');
    });

    wdmguxdemo.init ();
});

$('#playCBPLUS').click (function () {
    alert ('Comming soon, stay tuned!');
});

$('.link-not-ready').click (function (e) {
    e.preventDefault();
    alert ('Comming soon, stay tuned!');
});

</script>

</body>
</html>
